<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #content {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-auto-rows: minmax(100px, auto);
            max-width: 960px;
            margin: 0 auto;
        }
        
        #content>* {
            /* padding: 30px; */
            text-align: center;
            line-height: 100px;
            background-color: skyblue;
            font-size: 4em;
            color: #fff;
        }
        
        .item1 {
            grid-column-start: span 6;
        }
        
        .item2 {
            grid-column-start: span 4;
        }
        
        .item3 {
            grid-column-start: span 3;
        }
        
        .item4 {
            grid-column-start: span 6;
            grid-row-start: span 2;
        }
        
        #content .box1 {
            background-color: #FF0000;
        }
        
        #content .box2 {
            background-color: #008000;
        }
        
        #content .box3 {
            background-color: #008080;
        }
        
        #content .box4 {
            background-color: #FFFF00;
        }
        
        #content .box5 {
            background-color: #FFD700;
        }
        
        #content .box6 {
            background-color: #FFC0CB;
        }
        
        #content .box7 {
            background-color: #800080;
        }
        
        #content .box8 {
            background-color: #0000FF;
        }
        
        #content .box9 {
            background-color: #000000;
        }
    </style>
</head>

<body>
    <div id="content">
        <div class="item1 box1">50%</div>
        <div class="item1 box2">50%</div>
        <div class="item2 box3">33%</div>
        <div class="item2 box4">33%</div>
        <div class="item2 box5">33%</div>
        <div class="item3 box6">25%</div>
        <div class="item3 box7">25%</div>
        <div class="item3 box8">25%</div>
        <div class="item3 box9">25%</div>
        <div class="item4 box1">50%</div>
        <div class="item4 box2">50%</div>

    </div>
</body>

</html>